<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          .lock{
            width: 140px;
            height: 30px;
            line-height: 30px;
            background-color: red;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            margin-top: 20px;
        }
        .unlock{
            width: 140px;
            height: 30px;
            line-height: 30px;
            background-color: yellow;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!--
        ele.事件=执行脚本
        功能：在DOM对象上绑定事件 执行脚本可以是一个匿名函数，也可以是一个函数的调用
        不建议使用HTML事件的原因：1.多元素绑定相同的事件时，效率低下 2.不建议在HTML元素中写Javascript
    -->
    <div class="lock" id="btn">锁定</div>
    <script>
        var btn = document.getElementById("btn")
        //给按钮绑定事件
        // btn.onclick = function(){
        // if(this.className === 'lock'){
        //     this.className="unlock";
        //    this.innerHTML = '未锁定';
        // }else{
        //     this.className = 'lock';
        //     this.innerHTML = '锁定'
        // }
        // }
        function clickBtn(){
            alert('222')
        }
        btn.onclick=clickBtn;
    </script>
</body>
</html>